<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--移动设备优先：添加响应式布局-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 的 CSS 文件 -->
    <link th:href="@{/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/formValidation/css/formValidation.min.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/css/main.css}" rel="stylesheet" crossorigin="anonymous">
    <link th:href="@{/css/register.css}" rel="stylesheet" crossorigin="anonymous">
    <title>用户管理-注册</title>
</head>
<body>
<main class="form-register text-center">
    <form class="g-3" novalidate id="registerForm" onsubmit="return validate(this)" th:action="@{/registerController}" method="post">
        <h1 class="h3 mb-3 fw-normal">请注册</h1>

        <div class="mb-3 form-floating">
            <!--
			data-dv-xxxx
			规则1：required=boolean required-message 必填项
			规则2：regex=String regex-message 正则匹配失败
			规则3：email=boolean email-message 邮箱验证失败
			规则4：uri=boolean uri-message
				age
				greaterthan
				lessthan
			-->
            <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" onblur="validateUsername(this)" autocomplete="off" value="aaaa">
            <label for="username" class="form-label">用户名</label>
        </div>
        <div class="mb-3 form-floating">
            <input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="email" onblur="validateEmail(this)"  autocomplete="off" value="aaaa@qq.com">
            <label for="email" class="form-label">邮箱</label>
        </div>
        <div class="mb-3 form-floating">
            <input type="password" class="form-control" id="password" placeholder="请输入密码" name="passwd" onblur="validatePassword(this)" autocomplete="off" value="aaZZ11">
            <label for="password" class="form-label">密码</label>
        </div>
        <div class="mb-3 form-floating">
            <input type="password" class="form-control" id="confirmPassword" placeholder="请确认密码" name="confirmPassword" rel="passwd" onblur="validateConfirmPassword(this)" autocomplete="off" value="aaZZ11">
            <label for="confirmPassword" class="form-label">确认密码</label>
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">注册</button>
        <div class="register">
            <span>已有账号，去 </span><a th:href="@{/toLoginPage}">登录</a>
        </div>
        <p class="mt-5 mb-3 text-muted">&copy; 2020–2021</p>
    </form>
</main>
</body>
<!--引入JQuery-->
<script th:src="@{/js/jquery-2.2.4.min.js}" crossorigin="anonymous"></script>
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/validate.min.js}" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {

    })
</script>
</html>